<template>
  <div class='center'>
    <div class="pic-b">
      <img :src="listData.photo||listData.wx_pic" alt="" @click="$router.push('/center/photo')">
    </div>
    <div class="user-info pr">
      <img :src="bac" alt="" class="pa">
      <p class="pa">{{listData.name}}</p>
      <p class="pa">{{listData.number}}</p>
    </div>
    <ul class="list">
      <li v-for="(item,index) in menuData" :key="index" @click.stop.prevent="routerTo(item)">
        <img :src="item.icon" alt="icon">
        <span>{{item.label}}</span>
        <van-icon name="arrow" class="arrow-right" />
      </li>
    </ul>
  </div>
</template>
<script>
import MixIns from '../../mixin/mixin.js'
export default {
  components: {},
  name: "",
  data() {
    return {
      bac:require('../../assets/images/center/bg-green.png'),
      menuData:[
        {
          icon:require('../../assets/images/center/icon-04-s.png'),
          label:'通讯录',
          url:'/center/maillist'
        },{
          icon:require('../../assets/images/center/icon-3-6.png'),
          label:'修改密码',
          url:'/center/password'
        },{
          icon:require('../../assets/images/center/icon-3-12.png'),
          label:'上传照片',
          url:'/center/photo'
        },{
          icon:require('../../assets/images/center/icon-3-7.png'),
          label:'注销登录',
          click:this.signout,
        },
      ]
    };
  },
  methods:{
    routerTo(item){
      if(item.click){
        item.click()
        return
      }else if(!item.url){
        _g.toMessage({error:2,msg:"功能升级中..."})
        return
      }
      this.$router.push(item.url)
    },
    signout(){
      this.$dialog.confirm({
        title: '注销登录',
        message: '是否注销登录？'
      }).then(() => {
        _g.apiPost('users/logout').then(res=>{
          _g.toMessage(res)
          if(!res.error){
            this.$router.push('/login')
            setTimeout(()=>{
              sessionStorage.removeItem('number')
            },300)
          }
        })
      }).catch(() => {
        // on cancel
      });
    }
  },
  mixins:[MixIns]
};
</script>
<style lang="scss" scoped>
.center {
  height: 100%;
  
  .pic-b{
    height: 400px;
    background-color: #00998d;
    padding-top: 0.1px;

    img{
      width: 300px;
      height: 300px;
      border-radius: 50%;
      margin: 50px auto;
      box-shadow: 2px 2px 10px 0px #333;
    }
  }
  .user-info{
    height: 150px;

    img{
      width: 100%;
      height: 100%;
      transform: rotate(180deg) translateY(.1px);
    }
    p{
      color: #fff;
      text-align: center;
      width: 100%;
      line-height: 40px;
    }
    p:nth-of-type(2){
      top: 25px;
    }
  }
  .list{
    li{
      height: 95px;
      line-height: 95px;
      display: flex;
      margin: 0 15px;
      box-sizing: border-box;
      border-bottom: 1px solid #efeff4;

      img{
        width: 50px;
        height: 50px;
        margin-top: 22.5px;
        margin-right: 15px;
      }
      .arrow-right{
        margin-left: auto;
        color: #00998d;
        margin-top: 30px;
      }
    }
  }
}
</style>